<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<link rel="stylesheet" type="text/css" href="css/reset.css"/>
		<link rel="stylesheet" type="text/css" href="css/login.css"/>
		<title>用户登录</title>
		<script src="js/jquery-3.4.1.min.js" type="text/javascript"></script>
		<script type="text/javascript">
			$(document).ready(()=>{
				//点击切换图片
				$(".img-click").click(()=>{
					loddingImg();
				});
				//初始化加载图片
				loddingImg();

				function loddingImg(){
					$.ajax({
						url:'http://127.0.0.1:2021/shopstore/getImgCode',
						type: 'get',
						dataType: 'json',
						success : (resp)=>{
							console.log(resp)
							if(resp.code === 200){
								$("#img").attr("src",`data:image/jpeg;base64,${resp.img}`);
								//存放凭证
								localStorage.setItem("imgKey",resp.key);
							}
						},
						error: (error)=>{
							console.log(error)
						}
					})
				}
			})
		</script>
	</head>
	<body>
		<!--会员登录页面-->
		<div class="f-memberlogin-wp">
			<!--头部-->
			<div class="f-ml-header">
				<!--头部上边-->
				<div class="f-ml-hd-top clearfix">
					<div class="f-ml-hd-title">
						<div class="f-ml-hd-city l">
							所在城市 :
							<a href="javascript:void(0)">
								银川
							</a>
						</div>
						<ul class="f-ml-hd-ul">
							<li>
								<a href="javascript:void(0)">
									欢迎光临,银川商城
								</a>
							</li>
							<li>
								|
							</li>
							<li>
								<a href="javascript:void(0)">
									我是商家
								</a>
							</li>
							<li>
								|
							</li>
							<li>
								<a href="javascript:void(0)">
									0971-8859365
								</a>
							</li>
						</ul>
					</div>
				</div>
			</div>
			<!--内容-->
			<div class="f-login-middle">
				<div class="f-ml-middle-wp">
					<img class="f-ml-img2" src="img/login_bg.png" alt="会员登录中间图"/>
					<div class="f-ml-middle-right r">
						<!--登录框头-->
						<div class="f-ml-right-title clearfix">
							<span class="f-ml-font-logo">登录</span>
						</div>
						<!--账户名输入框-->
						<div class="f-ml-input1 clearfix">
							<input id="username" class="f-ml-put1 l" type="text" placeholder="  请输入账号" />
						</div>
						<!--未输入手机号警告-->
						<div class="f-ml-warn clearfix">
							<div class="f-ml-phone-warn">
								<div class="f-icons-phone l"></div>
								请输入帐号
							</div>
						</div>

						<!--密码输入框-->
						<div class="f-ml-input2 clearfix">
							<input id="password" class="f-ml-put2 l" type="password" placeholder="  请输入密码" />
							<div class="successpw">
								<div class="f-icons-on2 r"></div>
							</div>
							<!--输入正确图标-->
						</div>
						<!--未输入密码警告-->
						<div class="f-ml-warn clearfix">
							<div class="f-ml-pass-warn">
								<div class="f-icons-pass l"></div>
								请输入密码
							</div>
						</div>

						<!--验证码输入框-->
						<div class="f-ml-input3 clearfix">
							<input id="code" class="f-ml-put3 l" type="text" placeholder="  验证码" />
							<img style="margin: 0 10px 0 30px;cursor: pointer" alt="验证码" id="img" src="" class="img-click"/>
							<a class="f-ml-inp3a r img-click" href="javascript:void(0)" style="line-height: 40px;margin-right: 15px">
								换一张
							</a>
						</div>

						<!--自动登录-->
						<div class="f-ml-input4 clearfix">
							<input class="l" checked type="checkbox" />
							<div class="f-ml-checkbox l">
								自动登录
							</div>
						</div>
						<!--登录按钮-->
						<div class="f-ml-submit-button">
							<input id="btn1" class="f-ml-btn mlbtn1" type="button" value="登录"/>
							<input class="f-ml-btn mlbtn2" type="button" value="注册"/>
						</div>
					</div>
				</div>
			</div>
		</div>
	<script type="text/javascript">
		$(document).ready(function () {
			$("#btn1").click(()=>{
				let userName = $.trim($("#username").val());
				let userPassword = $.trim($("#password").val());
				let code = $.trim($("#code").val());
				if(userName === ""){
					window.alert("请输入用户名！");
				}else if(userPassword === ""){
					window.alert("请输入密码！")
				}else if(code === ""){
					window.alert("请输入验证码！")
				}else{
					let user = {userName,userPassword,code}
					user = JSON.stringify(user);
					console.log(user)
					//ajax请求登录接口
					$.ajax({
						url:'http://127.0.0.1:2021/shopstore/user/login',
						type:'post',
						data:{
							"userName":userName,
							"userPassword":userPassword,
							"userIsAdmin":0,
							"code":code,
							"imgKey":localStorage.getItem("imgKey")
						},
						xhrFields:{
						    withCredentials:true
						},
						dataType:'json',
						async: true,
						success: (resp)=>{
							if(resp.code === 200){
								alert(resp.msg);
								localStorage.setItem(resp.primarykey,JSON.stringify(resp.data));
								localStorage.setItem("token",JSON.stringify(resp.token))
								localStorage.setItem("user_imgPath",JSON.stringify(resp.data.imgPath));
								window.location.href= resp.view;
							}else{
								alert(resp.msg);
							}
						},
						error:(error)=>{
							console.log(error);
						}
					})
				}
			})
		})
	</script>
	</body>
</html>
